<template>
  <div class="songlist">
     <div v-if="!songsList.length">
      <el-skeleton animated />
    </div>
    <ul class="songlist-container">
      <li
        class="songlist-item"
        v-for="songs in songsList"
        :key="songs.id"
        @click="toSongDetail(songs.id)"
      >
        <div class="songItem-img">
          <img :src="songs.coverImgUrl" :alt="songs.alg" />
          <div class="songItem-cover">
            <div>
              <i class="sprite_icon reji"></i>
              <i>{{ Math.floor(songs.playCount / 10000) }}万</i>
            </div>
            <a class="sprite_icon play" href="##"></a>
          </div>
        </div>
        <p class="cover-title">{{ songs.name }}</p>
        <p class="cover-source">by {{ songs.creator.nickname }}</p>
      </li>
    </ul>
    <!-- 分页器 -->
    <pagination
      :currentPage="currentPage"
      :pageSize="pageSize"
      :total="total"
      @currentChange="handleCurrentChange"
    />
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
import { mapState, mapActions } from 'vuex'
import pagination from '@/components/pagination'
export default {
  name: 'SongList',
  data() {
    return {
      //总数
      total: 1000,
      //每页条数
      pageSize: 35,
      //当前页码
      currentPage: 1
    }
  },
  computed: {
    ...mapState('playlist', ['songsList', 'cat'])
  },
  components: {
    pagination
  },
  methods: {
    ...mapActions('playlist', ['getCatSongslist', 'getSongslist']),

    //点击分页器获取到最新的当前页数
    handleCurrentChange: debounce(
      function (currentPage) {
        this.currentPage = currentPage
        // offset 35乘以页数
        const offset = currentPage * 35
        this.getCatSongslist({ offset, cat: this.cat })
        // console.log("我接受到了",currentPage)
      },
      200,
      { maxWait: 1000 }
    ),

    // 去歌曲详情页面
    toSongDetail(id) {
     this.$router.push({
       name:"SongDetail",
        // params:id
      })
      localStorage.setItem("id",id)
    }
  },
  mounted() {
    // 请求数据
     const name=this.$route.query.cat
    if(!name){ 
    this.getSongslist()
    }
  }
}
</script>

<style lang="less" scope>
.songlist {
  width: 100%;
  margin-top: 30px;
  position: relative;
  .songlist-container {
    margin-left: -50px;
    display: flex;
    flex-wrap: wrap;
  }
  .songlist-item {
    width: 140px;
    padding: 0 0 30px 50px;
  }
}
.songItem-img {
  width: 140px;
  height: 140px;
  border: 1px solid #d9d9d9;
  position: relative;
  img {
    width: 100%;
  }
  .songItem-cover {
    bottom: 0;
    width: 99%;
    height: 27px;
    line-height: 27px;
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ccc;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid #484746;
    div {
      padding-left: 8px;
    }
    .reji {
      display: inline-block;
      padding-right: 5px;
      width: 14px;
      height: 11px;
      background-position: 0 -24px;
    }
    .play {
      padding-right: 10px;
      width: 16px;
      height: 17px;
      background-position: 0 0;
    }
  }
}
.cover-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
}
.cover-source {
  color: #666;
}
</style>
